<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template #right>
          <van-icon
            name="search"
            size="0.48rem"
            color="#fff"
            @click="moveSearchPageFn"
          />
        </template>
        <template #left>
          <img src="@/assets/toutiao_logo.png" alt="" class="logo" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-tabs v-model="active" sticky offset-top="1.226667rem" @change="channelChangesFn">
        <van-tab
          v-for="item in channel_list"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        >
          <ArticleList :id="item.id"></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="showPopup"
      />
    </div>
    <van-popup v-model="show" class="channel_popup" get-container="body">
      <!-- <ChannelEdit
        :unCheckChannelList="unCheckChannelList"
        :channel_list="channel_list"
        @addChannelEV="addChannelFn"
        @removeChannelEv="removeChannelFn"
        @closeEv="closeFn"
        v-model="active"
      ></ChannelEdit> -->
      <ChannelEdit
        :unCheckChannelList="unCheckChannelList"
        :channel_list="channel_list"
        @addChannelEV="addChannelFn"
        @removeChannelEv="removeChannelFn"
        @closeEv="closeFn"
        @changeChannel="changeChannelFn"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateChannelsAPI,
  delChannelAPI
} from '@/api'

import ChannelEdit from '@/views/Home/ChannelEdit'
import ArticleList from '@/views/Home/components/ArticleList'
export default {
  data () {
    return {
      active: 0,
      channel_list: [],
      allChannel_list: [],
      show: false,
      channelScrollTobj: {}
    }
  },

  async created () {
    const res = await getUserChannelsAPI()
    this.channel_list = res.data.data.channels
    const res2 = await getAllChannelsAPI()
    this.allChannel_list = res2.data.data.channels
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    showPopup () {
      this.show = true
    },
    addChannelFn (obj) {
      this.channel_list.push(obj)

      const newArr = this.channel_list.filter((item) => item.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        obj = { ...obj }
        delete obj.name
        obj.seq = index
        return obj
      })
      updateChannelsAPI(theNewArr)
    },
    async removeChannelFn (id) {
      const index = this.channel_list.findIndex((obj) => obj.id === id)
      this.channel_list.splice(index, 1)
      await delChannelAPI(id)
    },
    closeFn () {
      this.show = false
    },
    changeChannelFn (id) {
      this.active = id
    },
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    channelChangesFn () {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTobj[this.active]
        console.log(222)
      })
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelScrollTobj[this.active] = document.documentElement.scrollTop
      // console.log(this.channelScrollTobj[this.active])
      console.log(111)
    }

  },
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  },
  computed: {
    unCheckChannelList () {
      return this.allChannel_list.filter((allobj) => {
        const ind = this.channel_list.findIndex((chObj) => {
          // console.log(chObj.id, allobj.id)
          return chObj.id === allobj.id
        })

        if (ind === -1) {
          return true
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
